<template>
  <wf-el-drawer :title="title" :visible.sync="visible" size="540px" :wrapper-closable="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <div class="org-add-box">
        <div class="org-add-box-label">员工基本信息</div>
        <div class="org-add-box-cont">
          <el-form-item label="员工姓名：" prop="realName">
            <el-input v-model="form.realName" :maxlength="50" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="mobilePhone">
            <el-input
              v-model.trim="form.mobilePhone"
              :maxlength="11"
              placeholder="请输入"
              :disabled="isEdit"
            ></el-input>
          </el-form-item>
          <el-form-item label="出生日期/性别：" prop="birthday">
            <el-col :span="16">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-col>
            <el-col :span="8">
              <el-select v-model="form.sex">
                <el-option label="女" :value="0"></el-option>
                <el-option label="男" :value="1"></el-option>
                <el-option label="未知" :value="2"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="所属部门：" prop="deptName">
            <el-input v-model="form.deptName" placeholder="请选择">
              <el-button slot="append" icon="el-icon-edit" @click="selectDept"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="所属岗位：" prop="position">
            <el-input v-model="form.position" placeholder="请输入" :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱：" prop="email">
            <el-input v-model="form.email" placeholder="请输入" :maxlength="100"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="org-add-box">
        <div class="org-add-box-label">工作信息</div>
        <div class="org-add-box-cont">
          <el-form-item label="企业邮箱：" prop="enterpriseEmail">
            <el-input
              v-model="form.enterpriseEmail"
              placeholder="请输入"
              :maxlength="100"
            ></el-input>
          </el-form-item>
          <el-form-item label="员工工号：" prop="jobNumber">
            <el-input v-model="form.jobNumber" placeholder="请输入" :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="办公地点：" prop="officeLocation">
            <el-input
              v-model="form.officeLocation"
              placeholder="请输入"
              :maxlength="100"
            ></el-input>
          </el-form-item>
          <el-form-item label="座机号码：" prop="telephoneNumber">
            <el-input
              v-model="form.telephoneNumber"
              placeholder="请输入"
              :maxlength="20"
            ></el-input>
          </el-form-item>
          <el-form-item label="入职时间：" prop="entryTime">
            <el-date-picker
              v-model="form.entryTime"
              type="date"
              placeholder="请选择"
              style="width:100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="员工状态：" prop="useStatus">
            <el-select v-model="form.useStatus" style="width:100%" placeholder="请选择">
              <el-option label="在职" :value="0"></el-option>
              <el-option label="离职" :value="1"></el-option>
              <el-option label="注销" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入" :maxlength="100"></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="next">提交并添加下一位</el-button>
      <el-button type="primary" @click="save">提交</el-button>
    </div>
    <select-dept-modal ref="selectDept" @on-ok="onOk" />
  </wf-el-drawer>
</template>

<script>
  import { getDate } from '@/utils/dateTime';
  import SelectDeptModal from '../components/SelectDeptModal';

  import { addUser, updateUser } from '@/api/organization';
  import { isMobile, isEmail, isPhone } from '@/utils/regExpUtil';

  export default {
    components: { SelectDeptModal },
    data() {
      const currDate = getDate();
      const validateMobilePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
          return;
        }
        if (!isMobile(value)) {
          callback(new Error('手机号格式不正确'));
          return;
        }
        callback();
      };
      const validateEmail = (rule, value, callback) => {
        if (value === '') callback();
        if (!isEmail(value)) {
          callback(new Error('邮箱格式不正确'));
          return;
        }
        callback();
      };
      const validatePhone = (rule, value, callback) => {
        if (value === '') callback();
        if (!isPhone(value)) {
          callback(new Error('座机号码格式不正确'));
          return;
        }
        callback();
      };
      return {
        visible: false,
        // 原始数据
        rawData: {
          birthday: '',
          deptId: 0,
          deptName: '',
          email: '',
          enterpriseEmail: '',
          entryTime: currDate,
          id: 0,
          idCard: '',
          jobNumber: '',
          mobilePhone: '',
          officeLocation: '',
          organizationId: 0,
          position: '',
          realName: '',
          remark: '',
          sex: 1,
          telephoneNumber: '',
          useStatus: 0,
        },
        form: {},
        rules: {
          realName: [{ required: true, message: '请输入员工姓名', trigger: 'change' }],
          mobilePhone: [{ required: true, validator: validateMobilePhone, trigger: 'blur' }],
          deptName: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
          email: [{ validator: validateEmail, trigger: 'blur' }],
          enterpriseEmail: [{ validator: validateEmail, trigger: 'blur' }],
          telephoneNumber: [{ validator: validatePhone, trigger: 'blur' }],
          entryTime: [{ required: true, message: '请选择入职时间', trigger: 'change' }],
        },
        isEdit: false,
      };
    },
    computed: {
      title() {
        return this.isEdit ? '编辑用户' : '添加用户';
      },
    },
    methods: {
      onOpen(data) {
        const { mainId, mainTitle, organizationId } = data;
        this.isEdit = false;
        this.form = { ...this.rawData, deptId: mainId, deptName: mainTitle, organizationId };
        this.form.sex = this.form.sex > 1 ? 2 : this.form.sex;
        this.visible = true;
      },
      onEdit(data) {
        this.isEdit = true;
        this.form = { ...this.rawData, ...data };
        this.visible = true;
      },
      selectDept() {
        this.$refs['selectDept'].show();
      },
      onOk(item) {
        this.form.deptId = item.id;
        this.form.deptName = item.deptName;
      },
      cancel() {
        this.$refs['form'].resetFields();
        this.form.sex = 1;
        this.visible = false;
      },
      async next() {
        this.$refs['form'].validate(async valid => {
          if (valid) {
            if (this.form.id) {
              await updateUser(this.form);
              this.$emit('added');
            } else {
              const { status, message } = await addUser(this.form);
              this.$emit(status === 999 ? 'no-auth' : 'added', message);
              status === 999 ? (this.visible = false) : null;
            }
            this.$refs['form'].resetFields();
            this.form.sex = 1;
          }
        });
      },
      async save() {
        this.$refs['form'].validate(async valid => {
          if (valid) {
            if (this.form.id) {
              await updateUser(this.form);
              this.$emit('added');
            } else {
              const { status, message } = await addUser(this.form);
              this.$emit(status === 999 ? 'no-auth' : 'added', message);
            }
            this.cancel();
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .org-add-box-label {
    margin-bottom: 20px;
    font-weight: bold;
  }
</style>
